<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>瑞安市轩昊数控设备有限公司</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="login-index" v-if="user!==undefined">
      <header class="login-header clearfix">
        <div v-if="user!==null" style="float:left;padding-left:10px;">{{user.company}}</div>
        <div style="float:right;" class="login-header-handle">
          <el-button class="login-btn" type="text" size="medium" @click="lookPublicAccount">
            <span>公众号</span>
          </el-button>
          <template v-if="user===null">
            <el-button class="login-btn" type="text" size="medium" @click="register">注册</el-button>
            <el-button class="login-btn" type="text" size="medium" @click="toLoginSystem">
              <span>你好,请登录</span>
            </el-button>
          </template>
          <el-dropdown v-else size="medium" @command="handleCommand" placement="bottom">
            <div class="login-user">欢迎你,{{user.userName}}</div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="toIndexPage">进入管理系统</el-dropdown-item>
              <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </header>
      <div class="login-index-content">
        <released-material :has-handle="user!==null" :has-login="true">
          <template slot="floor">
            <div class="login-floor">
              <div>
                <span>Copyright &copy;2019 瑞安市轩昊数控设备有限公司</span>
                <span>备案号浙ICP备17008356号</span>
              </div>
              <div>
                <span>工信部链接：</span>
                <a href="http://beian.miit.gov.cn" target="_blank">http://beian.miit.gov.cn</a>
                <span>或</span>
                <a href="http://www.beian.miit.gov.cn" target="_blank">http://www.beian.miit.gov.cn</a>
            </div>
          </template>
        </released-material>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="openDialog" top="10vh" width="500px" @closed="dialogClosed">
      <div style="height:calc(80vh - 54px);overflow:auto" :style="{minHeight:dialogType==='login'?'470px':undefined}">
        <template v-if="openDialog">
          <login-form v-if="dialogType==='login'" @login-success="enterSystem"></login-form>
          <update-password v-else-if="dialogType==='updatePwd'" :user="user" @update-success="updatePwdSuccess">
          </update-password>
          <register-account v-else-if="dialogType==='register'" @register-success="registerSuccess"></register-account>
        </template>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/promptForm.css",
    "/vueSystem/components/css/imgSearchInput.css",
    "/shoppingMallMgr/releasedMaterial/css/imgsPreview.css",
    "/shoppingMallMgr/releasedMaterial/css/materialDetail.css",
    "/shoppingMallMgr/components/css/relationSupplierForm.css",
    "/shoppingMallMgr/releasedMaterial/css/releasedMaterial.css",
    "/shoppingMallMgr/releasedMaterial/css/cardMode.css",
    "./layout/login/css/loginForm.css",
    "./layout/login/css/updatePassword.css",
    "./layout/login/css/registerAccount.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/static/vue/base64.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/promptForm.js",
    "/vueSystem/components/svgIcon.js",
    "/vueSystem/components/imgSearchInput.js",
    "/vueSystem/components/countdownButton.js",
    "/vueSystem/mixins/tablePaginationMixin.js"
  ]);

</script>
<script src="./shoppingMallMgr/utils/moduleUtil.js"></script>
<script src="./shoppingMallMgr/models/materialModel.js"></script>
<script src="./shoppingMallMgr/models/supplierModel.js"></script>
<script src="./shoppingMallMgr/models/materialClassifyModel.js"></script>
<script src="./shoppingMallMgr/releasedMaterial/imgsPreview.js"></script>
<script src="./shoppingMallMgr/releasedMaterial/materialDetail.js"></script>
<script src="./shoppingMallMgr/components/relationSupplierForm.js"></script>
<script src="./shoppingMallMgr/releasedMaterial/cardMode.js"></script>
<script src="./shoppingMallMgr/releasedMaterial/releasedMaterial.js"></script>
<script src="./layout/login/loginForm.js"></script>
<script src="./layout/login/updatePassword.js"></script>
<script src="./layout/login/registerAccount.js"></script>

<script>
  var app = new Vue({
    el: "#app",

    data: function () {
      return {
        loading: false,
        user: undefined,
        openDialog: false,
        dialogTitle: '',
        dialogType: ''
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setUser().then(function (user) {
        if (user === null) {
          var data = SysUtil.getPathParam();
          var redirectUrlForLogin = data ? data.redirectUrlForLogin : '';
          if (redirectUrlForLogin.indexOf('/datav') !== -1) {
            self.toLoginSystem();
          }
        }
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setUser: function () {
        var self = this;
        return ajaxRequest('user/getUserName', {}, false, false).then(function (res) {
          if (!res.result) {
            self.user = null;
            window.sessionStorage.removeItem('user');
            return null;
          }

          var user = res.data;
          SysUtil.formatUserInfo(user);
          self.user = user;
          window.sessionStorage.setItem('user', JSON.stringify(user));
          return user;
        }).catch(function () {
          return null;
        });
      },

      enterSystem: function () {
        this.openDialog = false;
        this.loading = true;
        var self = this;
        this.setUser().then(function () {
          self.loading = false;

          var obj = SysUtil.getPathParam();
          var url = 'index.html';
          if (obj !== null) {
            var redirectUrlForLogin = obj.redirectUrlForLogin;
            if (!SysUtil.isEmpty(redirectUrlForLogin)) {
              url = redirectUrlForLogin;
            }
          }
          window.location.href = url;
        }).catch(function () {
          self.loading = false;
        });
      },

      lookPublicAccount: function () {
        var msg = /* html */ `
          <div class="code-error-div">
            <div class="code-error-text">关注后享受更多功能</div>
            <div class="code-error-img"><img src="./img/public.jpg"></div>  
          </div>
        `;
        this.$alert(msg, '公众号', {
          dangerouslyUseHTMLString: true
        });
      },

      register: function () {
        this.openDialog = true;
        this.dialogTitle = "注册账户";
        this.dialogType = "register";
      },

      toLoginSystem: function () {
        this.openDialog = true;
        this.dialogTitle = "用户登录";
        this.dialogType = "login";
      },

      handleCommand: function (command) {
        switch (command) {
          case 'updatePwd':
            this.openDialog = true;
            this.dialogTitle = "修改密码";
            this.dialogType = "updatePwd";
            break;
          case 'logout':
            this.toLogout();
            break;
          case 'toIndexPage':
            window.location.href = 'index.html';
            break;
        }
      },

      updatePwdSuccess: function () {
        this.openDialog = false;
      },

      registerSuccess: function () {
        this.openDialog = false;
      },

      dialogClosed: function () {
        this.dialogTitle = '';
        this.dialogType = '';
      },

      toLogout: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('user/logoutSystem').then(function () {
          self.user = null;
          window.sessionStorage.removeItem('user');
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      ReleasedMaterial: ReleasedMaterial,
      LoginForm: LoginForm,
      UpdatePassword: UpdatePassword,
      RegisterAccount: RegisterAccount
    }
  });

</script>
<style>
  .login-index {
    height: 100%;
  }

  .login-index .login-header {
    height: 30px;
    line-height: 30px;
    background: #e3e4e5;
    border-bottom: 1px solid #dddddd;
    color: #999;
  }

  .login-index .login-header .login-header-handle {
    padding: 0 10px;
    font-size: 14px;
  }

  .login-index .login-header .login-btn {
    padding-top: 7px;
    padding-bottom: 7px;
    color: #999;
    font-size: 14px;
  }

  .login-index .login-header .login-btn:hover {
    color: #ff0000;
  }

  .login-index .login-header .login-user {
    color: #999;
    font-size: 14px;
    height: 100%;
    cursor: pointer;
  }

  .login-index .login-index-content {
    height: calc(100% - 41px);
    overflow: auto;
    padding-top: 10px;
  }

  .login-index .login-floor{
    color: #999;
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
  }

  .login-index .released-material .released-material-table-div {
    height: calc(100% - 127px);
  }

</style>

</html>
